import React, { Component } from 'react'
import { Menu, Dropdown, Avatar,Layout} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined, 
  DownOutlined
} from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'

const { Header } = Layout;


class topHeader extends Component {
  toggle = () => {
    // console.log("关闭",this.props)
    this.props.changeCollapsed()
  }
  render() {
    const {role:{roleName},username} = JSON.parse(localStorage.getItem("token"))
    const menu = (
      <Menu style={{marginTop:'10px'}}>
        <Menu.Item key="guanli">
          {roleName}
        </Menu.Item>
        <Menu.Item key="tuichu" danger onClick={()=>{
            localStorage.removeItem("token")
            this.props.history.replace('/login')
        }}>退出</Menu.Item>
      </Menu>
    );
    
    return (
      <div>
        <Header className="site-layout-background" style={{ padding: "0 16px" }}>
          {React.createElement(this.props.isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: this.toggle,
          })}
          <div style={{ position: "fixed", right: "0", top: "0" }}>
            <span>欢迎<span style={{color:"#1890FF"}}>{username}</span>回来</span>
            <Dropdown overlay={menu}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                <Avatar size="large" icon={<UserOutlined />} /> 
                <DownOutlined />
              </a>
            </Dropdown>,
          </div>
        </Header>
      </div>
    )
  }
}
/*
  content(
    第一个参数是对象{
      map
    }
  )
*/
const mapStateToProps = (state)=>{
  // console.log(state)
  const isCollapsed = state.collApsedReducer.isCollapsed
  return {
      isCollapsed
  }
}

const mapDispatchToProps = {
  changeCollapsed(){
      return {
          type: "change_collapsed"
          // payload:
      }//action 
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(topHeader))